@media only screen and (max-width: 330px) {
    .dr-logo {
        display: none;
    }
}
@media only screen and (max-width: 395px) {
    .social-icon{
        width: 75px;
        height: 75px;
        padding-top: 24px;
    }
}
@media only screen and (max-width: 480px) {
    p{margin: 0;}
    $sectionPadding: 60px;
    section{padding: $sectionPadding 0;}
    section[role*="complementary"]{
        padding: $sectionPadding/2 0;
        h3{
            font-size: 2em;
        }
    }
    .beneficios{
        img{
            margin-top: 2em;
        }
    }
    .consejos, .beneficios, .composteras{
        h2{
            margin: 0;
        }
        img{
            margin-top: 3em;
        }
    }
    .voz{
        h3{
            font-size: 2.25em;
        }
    }
}

@media (min-width: 820px) {
    #menu-icon{
        
    }
    nav.top{
        ul{
            display: inline !important;
            padding: 0;
            background-color: #fff;
            li{
                display: inline;
                padding: 0 10px;
                a{
                    line-height: 4.2857em;
                    color: $navColor;
                    line-height: 4.2857em;
                    display: inline-block;
                    width: auto;
                    padding: 0px;
                    border-bottom: none;
                    &:hover{color:$bgcComplementary; background:none;}
                    outline: none !important
                }
                &.active a{
                    color:$bgcComplementary;
                }
            }
        }
        
        .menu{
            margin-bottom: 15px;
            display: none;
        }
    }
    .social-icon{
        width: 120px;
        height: 120px;
        padding-top: 32px;
        span{font-size: 58px !important;}
    }
}

@media (max-width: 1024px) {
    //.btn-social{margin: 10px 0;}
}
@media (min-width: 1024px) {
    #iniDr{
        display: inline;
        color: $navColor;
    }
}

//MOBILE
@media only screen and (max-width: 640px) {
    .voz img{max-width: 240px;}
    .mgTop{margin-top: 2em;}
    .mbBottom{margin-bottom: 2em;}
    //.btn-social{margin: 10px 0;}
    /*COMO RECICLAR ALIGN*/
    .como-reciclar-align{
        margin-top: 0px;
    }
}

@media only screen and (min-height: 560px) {
    #myModal{
        position: fixed;
        top: 100px !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1040px) {.reveal-modal.tiny{width: 40% !important;}}
